<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebSocket 测试客户端</title>

</head>

<body>
    <!-- 输入框，用于输入要发送的消息 -->
    <input type="text" id="message">
    <!-- 提交按钮，用于发送消息 -->
    <button id="submit">提交</button>

    <script>
        // 创建 WebSocket 实例，连接到指定服务器地址和端口
        let websocket = new WebSocket("ws://8.138.85.38:8888");

        // 当 WebSocket 连接成功时，执行此函数
        websocket.onopen = function () {
            console.log("WebSocket 连接成功");
        };

        // 当 WebSocket 接收到服务器消息时，执行此函数
        websocket.onmessage = function (e) {
            console.log("收到服务器消息: " + e.data);
        };

        // 当 WebSocket 发生错误时，执行此函数
        websocket.onerror = function () {
            console.log("WebSocket 连接错误");
        };

        // 当 WebSocket 连接关闭时，执行此函数
        websocket.onclose = function () {
            console.log("WebSocket 连接关闭");
        };

        // 获取输入框和按钮元素
        let input = document.querySelector('#message');
        let button = document.querySelector('#submit');

        // 当用户点击“提交”按钮时，发送输入框中的消息给服务器
        button.onclick = function () {
            console.log("发送消息: " + input.value);
            websocket.send(input.value); // 向服务器发送消息
        };
    </script>

</body>

</html>
